<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-container>
          <el-header>
            会话参与者:
            {{user_list}}
          </el-header>
          <el-row>
            <el-scrollbar>
              <div class="chat_back">
                <div v-for="item in chat_data">
                  <div
                      v-if="item.chat_id === chat_id"
                      class="text-wrapper">
                    {{item.name}}:
                    {{item.content}}
                  </div>
                  <div class="time">
                    {{item.time}}
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <div>
              <el-input type="textarea" :rows="5" v-model="content"></el-input>
              <el-col>
                <el-button type="primary" @click="send()">发送</el-button>
                <el-button type="primary">使用技能</el-button>
                <el-button type="primary">创建私聊</el-button>
              </el-col>
            </div>
          </el-row>

        </el-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name:'ChatRoom',
  props:['chat_data','chat_id','c_name'],
  data(){
    return{
      user_list:['a','b','c'],
      content:"",
      // id:"default"
    };
  },
  created() {
    // this.id=this.$route.query.id;
  },
  methods: {
    send(){
      this.$emit('sendMes',this.content)
      this.content = "";
    },

  }
}
</script>

<style>
.chat_back{
  height: 400px;
  background-color: beige;
}
.text-wrapper {
  word-break: break-all;
  word-wrap: break-word
}
</style>
